<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表达式小结</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      //声明虚拟 DOM 对象
      //字面量值   string number boolean null undefined object => snbuo =>  usonb 
      // let vdom = <div>{undefined}</div>  //X
      // let vdom = <div>{'I Love You'}</div>  //√
      // let vdom = <div>{{test: 'ok'}}</div>  //X  而且会报错
      // let vdom = <div>{true}</div>  // X
      // let vdom = <div>{false}</div>  // X
      // let vdom = <div>{5211314}</div>  // √
      // let vdom = <div>{null}</div>  // X
      // let vdom = <div>{[1,2,'3']}</div>  // √
      // let vdom = <div>{'123'}</div>  // 
      // let vdom = <div>{React.createElement('h1', null, '自责要短暂，不过要长久铭记')}</div>
      // let vdom = <div>{<h2>白日放歌须纵酒，青春作伴好还乡。</h2>}</div>
      // let vdom = <div><h2>白日放歌须纵酒，青春作伴好还乡。</h2></div>

      //表达式  『规律: 都有返回值』
      //四则运算
      //三元   ?:
      //变量  对象属性   a.name   b     let res = a.name
      //函数或方法的调用   fn();
      // let vdom = <div>{1 + 1}</div>
      // let vdom = <div>{true ? 'vip' : '普通用户'}</div>
      // let v = 'love';
      // let vdom = <div>{v}</div>
      function fn(){
        return false;
        // return 3.1415926;
      }
      let vdom = <div>{fn()}</div>

      //大括号中『不能编写 JS 语句』

      ReactDOM.render(vdom, document.querySelector('#root'));
    </script>
  </body>
</html>
